<template>
  <div id="QuestionForm">
    <van-field v-model="formData.misTitle" placeholder="请输入标题（30字以内）"/>
    <van-field
        v-model="formData.title"
        rows="8"
        show-word-limit
        maxlength="200"
        type="textarea"
        placeholder="请填写问题描述"/>
    <div class="c-upload">
      <div class="c-upload__item active-able" v-for="(pic,i) in pictures" :key="i">
        <van-image class="c-upload__pic" fit="cover" :src="pic"/>
        <van-icon @click="pictures.splice(i,1)" class="c-upload__close" name="cross"/>
      </div>
      <label>
        <input style="display: none" type="file" @change="onUpload">
        <van-image :src="require('@/assets/img/pic_upoload.png')" class="c-upload__item active-able"/>
      </label>
    </div>
    <van-button type="primary" plain class="c-button" @click="picker.open(cols)">
      {{ sortDict ? sortDict.name : '选择分类' }}
    </van-button>
    <footer class="l-footer">
      <button class="l-footer__btn" @click="onSubmit">发布问题</button>
    </footer>
    <picker-view ref="picker" @submit="sortDict=$event"/>
  </div>
</template>
<script lang="ts">
import Vue, {ComponentOptions, VueConstructor} from "vue"
import Component from 'vue-class-component'
import {requestByGet, requestByPost, requestByUpload} from "@/utils/request";
import PickerView from "@/components/picker-view.vue";
import {Ref} from "vue-property-decorator";
import {objHasNull} from '@/utils/logic';

export const meta = {authValid: true};

export const title = ""
@Component({
  components: {PickerView}
})
export default class QuestionForm extends Vue implements ComponentOptions<Vue> {
  name = "QuestionForm"
  message = "";
  formData = {misTitle: null, title: null};
  sortDict: any = null;
  pictures: any[] = [];
  @Ref() picker!: any;
  cols = []

  async onUpload(e) {
    const el = e.target as HTMLInputElement;
    const [file] = el.files as any;
    this.pictures.push(await requestByUpload({file}))
    el.value = "";
  }

  async onSubmit() {
    if (objHasNull(this.formData) || !this.sortDict) return this.$toast.fail("请填写完整表单！");
    await requestByPost(`/qqc/qqcMistake/add`, {
      ...this.formData,
      sort: this.sortDict.id,
      remarks3: JSON.stringify(this.pictures)
    });
    this.$toast.success("操作成功！");
    return this.$popRoute();
  }

  async initOptions() {
    this.cols = await requestByGet(`/qqc/qqcMistakesub/syList`);
  }

  created(): void {
    this.initOptions();
  }
}
</script>

<style scoped lang="scss">
@import "~assets/common.scss";

#QuestionForm {
  height: 100vh;
  background: white;

  .c-button {
    border-radius: 16px;
    display: block;
    margin: 0 10px;
    height: 30px;
  }

  .l-footer {
    @include absoluteFull(fixed);
    @include flex-center;
    padding: 8px 0;
    top: auto;
    box-shadow: 0 -2px 6px 0 rgba(0, 0, 0, .1);

    &__btn {
      text-align: center;
      color: #fff;
      background: #349e7e;
      width: 90%;
      height: 44px;
      border-radius: 4px;
    }
  }

  .c-upload {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0 10px -4px;

    &__item {
      flex-shrink: 0;
      @include rect(120px);
      margin-top: 10px;
      margin-left: 6px;
      position: relative;
    }

    &__close {
      position: absolute;
      right: 0;
      top: 0;
      font-weight: bold;
      padding: 10px;
      font-size: 18px;
      color: white;
      transform: translate(30%, -30%);
    }

    &__pic {
      overflow: hidden;
      border-radius: 5px;
      @include rect(100%)
    }
  }

  .a-upload {
    margin: 10px;
    width: 130px;
  }
}
</style>
